<template>
	<view>
		<news-uni-nav-bar :tabBars="tabBars" :tabIndex="tabIndex" @change-tab="changeTab"></news-uni-nav-bar>

		<!-- 切换面板 -->
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :current="tabIndex" :style="{height: swiperHeight+'px'}" @change="tabChange">
				<swiper-item class="swiper-item">
					<scroll-view class="list" scroll-y="true">
						<block v-for="(item,index) in list" :key="index">
							<common-list :item="item" :index="index"></common-list>
						</block>
					</scroll-view>
				</swiper-item>
				<!-- 话题 -->
				<swiper-item>
					<scroll-view class="list" scroll-y="true">
						<!-- 搜索框 -->
						<view class="search-input">
							<input class="uni-input" type="text"
								placeholder-class="icon iconfont icon-sousuo topic-search" placeholder="搜索内容"
								value="" />
						</view>
						<!-- 轮播图 -->
						<swiper class="topic-swiper" :indicator-dots="true" :autoplay="true" :interval="3000"
							:duration="1000">
							<block v-for="(item,index) in topic.swiper" :key="index">
								<swiper-item>
									<image :src="item.src" mode="widthFix" lazy-load></image>
								</swiper-item>
							</block>
						</swiper>
						<!-- 热门分类 -->
						<topic-nav :nav="topic.nav"></topic-nav>
						<!-- 最近更新 -->
						<view class="topic-new">
							<view>最近更新</view>
							<block v-for="(item,index) in topic.list" :key="index">
								<topic-list :item="item"></topic-list>
							</block>							
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperHeight: 700,
				tabIndex: 1,
				topic: {
					swiper: [{
							src: "../../static/demo/lunbo1.jpg"
						},
						{
							src: "../../static/demo/lunbo2.jpg"
						},
						{
							src: "../../static/demo/banner2.jpg"
						}
					],
					nav: [ //从接口中获得
						{
							name: "最新"
						},
						{
							name: "游戏"
						},
						{
							name: "情感"
						},
						{
							name: "打卡"
						},
						{
							name: "故事"
						},
						{
							name: "喜爱"
						}
					],
					list:[
						{
							topicPic:"../../static/demo/topicpic/13.jpeg",
							topicName:"淘宝记录簿",
							topicDescription:"120斤到85斤 我的反转人生",
							totalNum:545,
							todayNum:720
						},
						{
							topicPic:"../../static/demo/topicpic/14.jpeg",
							topicName:"你亲身经历的灵异事件",
							topicDescription:"走出去,才发现你跟别人差的不是一点半点",
							totalNum:577,
							todayNum:821
						},
						{
							topicPic:"../../static/demo/topicpic/9.jpeg",
							topicName:"天天大卡",
							topicDescription:"面试官:在电梯里巧遇马云你会做什么?90后女孩的向答当场被录用",
							totalNum:507,
							todayNum:707
						},
						{
							topicPic:"../../static/demo/topicpic/12.jpeg",
							topicName:"520纪念日",
							topicDescription:"春风十里，不如见你",
							totalNum:1314,
							todayNum:520
						},
						{
							topicPic:"../../static/demo/topicpic/11.jpeg",
							topicName:"睡在我上铺的姐妹",
							topicDescription:"愿我们友谊地久天长！！",
							totalNum:777,
							todayNum:589
						}
						
					]
				},
				tabBars: [{
					name: "关注",
					id: "guanzhu"
				}, {
					name: "话题",
					id: "huati"
				}],
				list: [
					//文字
					{
						userpic: '../../static/demo/userpic/20.jpg',
						username: "胡歌",
						sex: 0, //0 男 1 女
						age: 31,
						isFollow: false,
						title: "如果皮囊无法修复，就用思想去填满它。",
						video: false,
						share: false,
						path: "长沙 雨花区",
						shareNum: 352,
						commonNum: 111,
						goodNum: 820
					},
					//图文
					{
						userpic: '../../static/demo/userpic/19.jpg',
						username: "刘诗诗",
						sex: 1, //0 男 1 女
						age: 28,
						isFollow: false,
						title: "我不懂得你眉眼间若有若无的黯然,但我希望能化解它!",
						titlePic: "../../static/demo/datapic/15.jpg",
						video: false,
						share: false,
						path: "长沙 芙蓉区",
						shareNum: 305,
						commonNum: 101,
						goodNum: 782
					},
					//视频
					{
						userpic: '../../static/demo/userpic/7.jpg',
						username: "金星",
						sex: 1, //0 男 1 女
						age: 36,
						isFollow: false,
						title: "幻想属于黑夜，白天经不起浪费。",
						titlePic: "../../static/demo/datapic/17.jpg",
						video: {
							lookNum: "200w",
							long: "3:14"
						},
						share: false,
						path: "北京 朝阳区",
						shareNum: 359,
						commonNum: 211,
						goodNum: 982
					},
					//分享
					{
						userpic: '../../static/demo/userpic/5.jpg',
						username: "林清玄",
						sex: 0, //0 男 1 女
						age: 51,
						isFollow: false,
						title: "安静无言并不是陷入空白,而是有一个更深广、更澄明的所在。",

						video: false,
						share: {
							title: "无形的春天借着树上的叶、枝上的芽，我们竟能触摸得如此真切!",
							titlePic: "../../static/demo/datapic/34.jpg"
						},
						path: "长春 芙蓉区",
						shareNum: 156,
						commonNum: 101,
						goodNum: 566
					}
				]

			}
		},
		methods: {
			changeTab(index) {
				this.tabIndex = index;
			},
			tabChange(event) {
				this.tabIndex = event.detail.current;
			}
		}
	}
</script>

<style>
	/* 输入框  begin*/
	.search-input {
		padding: 20rpx;
	}

	.search-input>input {
		background-color: #f4f4f4;
		border-radius: 10rpx;
	}

	.topic-search {
		display: flex;
		justify-content: center;
		font-size: 27rpx;
		font-weight: 600;
	}

	/* 输入框  end*/

	/* 轮播 begin */
	.topic-swiper {
		padding: 0rpx 20px 20rpx 20rpx;
	}

	.topic-swiper image {
		width: 100%;
		border-radius: 20rpx;
	}

	/* 轮播 end */

	

	/* 最近更新 begin */
	
	.topic-new {
		padding: 20rpx;
	}

	.topic-new>view:first-child {
		font-size: 30rpx;
		margin-bottom: 20rpx;
	}

	/* 最近更新 end */
</style>
